<template>
  <div class="parent p-20 page-wrapper d-flex flex-column">
    <div class="header d-flex mb-20">
      <MyButton class="add mr-20" icon="el-icon-plus" @click="handleAdd"
        >{{$t('common.add')}}</MyButton
      >
      <el-select v-model="lib_type" class="mr-20">
        <el-option
          v-for="item in lib_type_list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <MyButton class="confirm" @click="handleConfirm">{{$t('common.confirmQueding')}}</MyButton>
    </div>
    <MyTable
      :data="tableData"
      stripe
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column
        sortable
        width="180"
        type="index"
        :label="$t('common.order_number')"
      ></el-table-column>
      <el-table-column
        prop="lib_name"
        :label="$t('renxiangkuguanli.lib_name')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="picture_no"
        :label="$t('renxiangkuguanli.picture_no')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="create_time"
        :label="$t('common.create_time')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="lib_type_text"
        :label="$t('renxiangkuguanli.lib_type')"
        min-width="180"
      ></el-table-column>
      <el-table-column :label="$t('common.operate')" min-width="180">
        <template slot-scope="scope">
          <MyButton
            class="text"
            type="text"
            size="small"
            @click="handleManagement(scope.row)"
            >{{$t('manage')}}</MyButton
          >
          <span class="ml-10 mr-10" v-if="scope.row.lib_type !== 0">|</span>
          <MyButton
            class="text"
            v-if="scope.row.lib_type !== 0"
            @click="handleEdit(scope.row)"
            type="text"
            size="small"
          >
            {{ $t("common.edit") }}
          </MyButton>
          <span class="ml-10 mr-10" v-if="scope.row.lib_type !== 0">|</span>
          <MyButton
            class="text"
            type="text"
            size="small"
            v-if="scope.row.lib_type !== 0"
            @click="handleDelete(scope.row)"
            >{{ $t("common.delete") }}</MyButton
          >
        </template>
      </el-table-column>
    </MyTable>
    <EditDialog
      :visible.sync="isAddDialogShow"
      :row="row"
      :type="editType"
      @refresh="getList"
    />
  </div>
</template>

<script>
import MyButton from "@/components/Button";
import { getLibList, deleteLib } from "./service";
import EditDialog from "./EditDialog.vue";
import util from "@/utils";
export default {
  components: {
    MyButton,
    EditDialog,
  },
  data() {
    return {
      tableData: [],
      row: {},
      lib_type_list: [
        { label: this.$t('common.all'), value: void 0 },
        { label: this.$t('renxiangkuguanli.blackLib'), value: 1 },
        { label: this.$t('renxiangkuguanli.whiteLib'), value: 2 },
        { label: this.$t('route.moshengrenku'), value: 0 },
      ],
      editType: "add",
      isAddDialogShow: false,
      lib_type: void 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleManagement(row) {
      // 陌生人口
      if (row.lib_type === 0) {
        this.$router.push({
          name:'greyList',
        })
        localStorage.setItem('curR','library')
      } else {
        this.$router.push({
          name:'targets',
          query:{lib_name:row.lib_name,lib_id:row.lib_id}
        })
      }
    },
    handleConfirm() {
      this.getList();
    },
    async getList() {
      const res = await getLibList({ lib_type: this.lib_type });
      this.tableData = res.data.record.map((item) => {
        return {
          ...item,
          create_time: item.create_time || "--",
          lib_type_text: this.lib_type_list.find(
            (i) => i.value === item.lib_type
          ).label,
          lib_name:
            item.lib_name === "stranger_lib" ? this.$t('route.moshengrenku') : item.lib_name,
        };
      });
    },
    handleAdd() {
      this.isAddDialogShow = true;
      this.editType = "add";
    },
    handleEdit(row) {
      this.isAddDialogShow = true;
      this.editType = "edit";
      this.row = {...row};
    },
    handleDelete(row) {
      this.$confirm(
        this.$t("renxiangkuguanli.deletePromit"),
        this.$t("renxiangkuguanli.delete_lib"),
        {
          confirmButtonText: this.$t("common.deleteConfirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      ).then(async () => {
        let res = await deleteLib({ lib_id: row.lib_id });
        if (res.code == 0) {
          util.msg.success("deleteSuccess");
          this.getList();
        }
        // 直接删除
      });
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
}
</style>
